<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'verify' }">总览</el-breadcrumb-item>
      <el-breadcrumb-item>员工</el-breadcrumb-item>
      <el-breadcrumb-item>退休员工记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table
        ref="multipleTable"
        :data="list"
        :stripe="true"
        style="width: 100%"
      >
        <el-table-column
          prop="uid"
          label="序号"
          width="auto"
          align="center"
          :resizable="false"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>

        <el-table-column
          prop="workid"
          label="工号"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.snumber }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sname }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="username"
          label="性别"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ssex | genderFilter }}</span>
          </template>
        </el-table-column>

        <!-- 职务 -->
        <el-table-column
          prop="job"
          label="职务"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sduty }}</span>
          </template>
        </el-table-column>

        <!-- 公司 -->
        <el-table-column
          prop="username"
          label="公司"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sdep }}</span>
          </template>
        </el-table-column>
        
      </el-table>
    </el-card>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @current-change="currentChangeHandle"
        :current-page.sync="currentpage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
      >
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
export default {
  filters: {
    genderFilter(gender) {
      const genderMap = {
        F: "女",
        M: "男",
      };
      return genderMap[gender];
    },
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
      },
      list:null,
      downloadLoading:false,
      listLoading: true,
      total:0
    };
  },
  created() {
    this.getRecords();
  },
  methods: {
    getRecords() {
      const that = this;
      this.listLoading = true;
      this.$axios({
        method: "get",
        url: "/api/staff/leftStaff",
        params: this.listQuery,
      }).then(function (res) {
        console.log(res)
        that.list = res.data.data;
        that.total = res.data.total;
        that.listLoading = false;
      });
    },
    
   
    
    //序号自增
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.limit + index + 1;
    },
  currentChangeHandle(val) {
      this.listQuery.page = val; // 改变默认的页数
      this.getRecords(); // 切换页码时，要获取每页显示的条数
      console.log(`当前页: ${val}`);
    },
    
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
.filter-container {
  display: flex;
  margin-bottom: 0.5rem;
}
</style>